<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/main/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <link rel="stylesheet" th:href="@{/main/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/main/layuimini/css/public.css}" media="all">
    <script th:src=" @{/main/js/axios.min.js}"></script>
    <style>
        body {
            background-color: #ffffff;
        }

        * {
            outline: none;
        }

        .file {
            margin-bottom: 30px;
        }

        .fileinp {
            width: 108px;
            overflow: hidden;
            position: relative;
        }

        .upload {
            width: 100px;
            background-color: #82b6f4;
            border-radius: 13px;
            text-align: center;
            padding: 4px;
            color: #fff;
        }

        .file-up {
            position: absolute;
            top: 0;
            right: 0;
            height: 30px;
            cursor: pointer;

        }

        .fileinp:hover .upload {
            background: #378eef;
        }

    </style>
</head>
<body>
<!--
th:action="@{/movie/addMovie}" method="post"
-->
<form id="form1" action="" lay-filter="add" method="post" class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">电影名称</label>
        <div class="layui-input-block">
            <input type="text" id="mName" name="mName" lay-verify="required|name" lay-reqtext="电影名不能为空"
                   placeholder="请输入电影名称" value=""
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">电影类型</label>
        <div class="layui-input-block">
            <input type="text" id="mType" name="mType" lay-verify="required" lay-reqtext="电影类型不能为空"
                   placeholder="请输入电影类型"
                   value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">电影时长</label>
        <div class="layui-input-block">
            <input type="text" id="mLength" name="mLength" lay-verify="required|number" lay-reqtext="电影时长不能为空"
                   placeholder="请输入电影时长"
                   value="" class="layui-input">
            <!--            <tip>填写自己管理账号的名称。</tip>-->
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">导演</label>
        <div class="layui-input-block">
            <input type="text" id="mDirector" name="mDirector" lay-verify="required" lay-reqtext="导演不能为空"
                   placeholder="请输入导演"
                   value="" class="layui-input">
            <!--            <tip>填写自己管理账号的名称。</tip>-->
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">演员</label>
        <div class="layui-input-block">
            <input type="text" id="mActor" name="mActor" lay-verify="required" lay-reqtext="演员不能为空"
                   placeholder="请输入演员"
                   value="" class="layui-input">
            <!--            <tip>填写自己管理账号的名称。</tip>-->
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="上映中" title="上映中" checked>
            <input type="radio" name="status" value="未上映" title="未上映">
            <input type="radio" name="status" value="已下线" title="已下线">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">上映时间</label>
        <div class="layui-input-block">
            <input id="mDate" name="mDate" lay-verify="required" lay-reqtext="上映时间不能为空"
                   value="" class="layui-input mDate">
            <!--            <tip>填写自己管理账号的名称。</tip>-->
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea id="mIntroduction" name="mIntroduction" class="layui-textarea" placeholder="请输入简介"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 145px;">
        <button type="button" class="layui-btn" id="test3">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <div class="layui-input-block">
            <input type="button" id="submit" onclick="getdata()" class="layui-btn layui-btn-normal" value="立即提交 "
                   lay-submit lay-filter="saveBtn">
        </div>
    </div>
</form>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '.mDate' //指定元素
        });
    });

    function getdata() {
        layui.use('form', function () {
            var form = layui.form;
            console.log(form.val("add"))
            return form.val("add");
        })
    }

    layui.use(['form', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.$;
        let data = form.val("add");
        upload.render({ //允许上传的文件后缀
            elem: '#test3'
            , url: '/movie/addMovie' //此处配置你自己的上传接口即可
            , accept: 'file' //普通文件
            , auto: false
            , bindAction: "#submit"
            ,before:function (obj) {
                layer.load();
                this.data={
                    mActor:$("#mActor").val(),
                    mName:$("#mName").val(),
                    mType:$("#mType").val(),
                    mLength:$("#mLength").val(),
                    mPrice:$("#mPrice").val(),
                    mDate:$("#mDate").val(),
                    mDirector:$("#mDirector").val(),
                    mIntroduction:$("#mIntroduction").val(),
                    status:$('input:radio:checked').val()
                }
            }
            , done: function (res) {
                layer.msg('上传成功', {
                    icon: 1,
                    time: 1500,
                    end: function () {
                        window.location = '/movie/index';
                    }
                });
            }
            , error: function (res) {
                layer.msg('上传成功', {
                    icon: 1,
                    time: 1500,
                    end: function () {
                        window.location = '/movie/index';
                    }
                });
            }
        })
        form.verify({
            money: [
                /^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$/,
                '请输入正确的金额'
            ],
            name: [
                /^[\u4e00-\u9fa5]{2,18}[0-9]?$/,
                '请输入正确的电影名'
            ]

        })

        function hint(data) {
            layer.msg(data, {
                icon: 1,
                time: 1000,
                end: function () {
                    parent.refresh();//刷新到表格
                    // 关闭弹出层
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }
            });
            return false;
        }

        function hintError(data) {
            layer.msg(data, {
                icon: 5,
                time: 1000,
                end: function () {
                    document.getElementById("submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
                }
            });
            return false;
        }
    })
</script>
</body>
</html>